<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: 任静
 * @Date: 2020-10-21 20:03:21
 * @LastEditors: 任静
 * @LastEditTime: 2020-10-21 22:26:35
-->
<template>
  <div>
    <h2>考试库管理</h2>
    <el-button @click="handleCreate">创建试卷</el-button>
    <el-button @click="handleDownload">下载试卷</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="编号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试卷ID" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试卷名称" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试卷科目" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已抽试题" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试卷状态" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >禁用</el-button
          >
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >下载</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加弹框 -->
    <el-dialog title="创建试卷" :visible.sync="createDialogVisible">
      <el-form :label-position="testform" label-width="80px" :model="testform">
        <el-form-item label="考试标题">
          <el-input v-model="testform.title" />
        </el-form-item>
        <el-form-item label="试题类型">
          <el-input v-model="testform.type" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">创建考试试卷</el-button>
      </span>
    </el-dialog>
    <!-- 下载弹框 -->
    <el-dialog title="创建试卷" :visible.sync="DownloadDialogVisible">
      <el-form :label-position="testform" label-width="80px" :model="testform">
        <el-form-item label="考试标题">
          <el-input v-model="testform.title" />
        </el-form-item>
        <el-form-item label="试题类型">
          <el-input v-model="testform.type" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DownloadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">创建考试试卷</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
      testform: {
        title: "",
        type: "",
      },
      createDialogVisible: false, //创建弹框
      DownloadDialogVisible: false, //下载弹框
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    //显示创建试卷弹框
    handleCreate() {
      console.log(this.createDialogVisible);
      this.createDialogVisible = true;
    },
    // 保存修改
    handleSave() {
      this.createDialogVisible = false;
      console.log(this.testform);
    },
    //下载弹框
    handleDownload() {
      this.DownloadDialogVisible = true;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>